<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>{{count}}</h1>
    <button @click = "plusCount">点我+</button>
    <button @click = "reduceCount">点我-</button>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment: state => state.count++,
            decrement: state => state.count--
        }
    })

    new Vue({
        el: '#app',
        //store
        store,
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        // actions
        methods: {
            // 所有异常方法必须通过commit方式提交，才能保证状态跟踪及相关功能实现
            plusCount() {
                this.$store.commit('increment')
            },
            reduceCount() {
                this.$store.commit('decrement')
            }
        }
    })
</script>
</body>
</html>